<template>
    <el-dialog
        title="选择物品"
        v-model="dialogVisible"
        width="60%"
        :before-close="handleClose"
        @open="open"
    >
        <!--对话框表格信息-->
        <div>
            <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" @row-dblclick="choiceGs">
                <!--            <el-table-column type="selection" width="55"> </el-table-column>-->
                <el-table-column type="expand" style="margin-left: 30px"  :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" >
                    <template #default="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品编号：">
                                <span>{{ props.row.code }}</span>
                            </el-form-item>
                            <el-form-item label="物品名称：">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="物品类别：">
                                <span>{{ props.row.gsClassify.name }}</span>
                            </el-form-item>
                            <el-form-item label="物品规格：">
                                <span>{{ props.row.spec }}</span>
                            </el-form-item>
                            <el-form-item label="物品数量：">
                                <span>{{ props.row.num }}</span>
                            </el-form-item>
                            <el-form-item label="物品价格：">
                                <span>{{ props.row.unitPrice }}元</span>
                            </el-form-item>
                            <el-form-item label="是否可用：">
                                <span>{{ props.row.enabled }}</span>
                            </el-form-item>
                            <el-form-item label="上架时间：">
                                <span>{{ props.row.createTime }}</span>
                            </el-form-item>
                            <el-form-item label="物品描述：">
                                <span>{{ props.row.gsClassify.remark }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="商品编号" prop="code"></el-table-column>
                <el-table-column label="商品名称" prop="name"> </el-table-column>
                <el-table-column label="物品规格" prop="spec"> </el-table-column>
                <el-table-column align="right" >
                    <template #header>
                        <el-input v-model="search" placeholder="输入关键字搜索" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
<span class="dialog-footer">
  <el-button @click="dialogVisible = false">取 消</el-button>
    <!--      <el-button type="primary" @click="dialogVisible = false"></el-button>-->
</span>
        </template>
    </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import {goodsAll} from "../../../../../network/adm/office";

export default {
    name: "GsChoiceBox",
    data() {
        return{
            dialogVisible: false,
            rowNum:1,
            search:"",
            selected: [],
            tableData: []
        }
    },
    methods: {
        choiceGs(row){
            if(!this.selected.includes(row.id)){
                this.selected.push(row.id);
                let select = Object.assign({},row)
                select.num = null
                this.gsData.push(select);
            }else {
                ElMessage.info('该物品已存在')
            }
        },
        //增加行
        addRow(){
            var list ={
                rowNum: this.rowNum,
                code:"",
            };
            this.tableData.unshift(list)
            this.rowNum += 1;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done()
                })
                .catch((_) => {})
        },
        //获取数据库的物品信息
        loadGsList(){
            goodsAll().then(data=>{
                console.log('物品信息',data)
                this.tableData=data;
            })
        },
        open(){
            this.loadGsList();
        }
    }
}
</script>

<style scoped>

</style>